<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad,
  } from '@dcloudio/uni-app'
  const isManage = ref(false)
  const isSelectAll = ref(false)
  const rightText = ref('管理')
  const leftIcon = ref('arrow-leftward')
  const isDisabled = ref(true)
  const rightTextState = ref(0)

  function toSearch() {
    uni.navigateTo({
      url: "/pages/city/city-search"
    })
  }
  const cityLocation = ref([])
  const currentLocation = ref({})
  const currentId = ref('')
  const cityLength = ref(0)
  onLoad(() => {
    cityLocation.value = uni.getStorageSync('cityCache') || []
    if (uni.getStorageSync('currentLocation')) {
      currentLocation.value = JSON.parse(uni.getStorageSync('currentLocation')) || {}
      currentId.value = cityLocation.value.findIndex(item => item.adcode == currentLocation.value.adcode)
    }
    cityLocation.value.forEach((e, index) => {
      if (index !== currentId.value) {
        e.checked = false
        cityLength.value += 1
      }
    })
  })

  const checkboxValue = ref([])


  function checkboxChange(e) {
    checkboxValue.value = e.detail.value
    isDisabled.value = checkboxValue.value.length > 0 ? false : true
    cityLocation.value.forEach((ele, index) => {
      if (index !== currentId.value) {
        if (e.detail.value.length == cityLength.value) {
          ele.checked = true
          rightText.value = "取消全选"
          rightTextState.value = 2
        } else {
          rightText.value = "全选"
          rightTextState.value = 1
        }
      }
    })
  }

  function delCity() {
    checkboxValue.value.forEach(ele => {
      const index = cityLocation.value.findIndex((e, index) => e.adcode == ele)
      if (index !== -1) {
        cityLocation.value.splice(index, 1)
      }
    })
    currentId.value = cityLocation.value.findIndex(item => item.adcode == currentLocation.value.adcode)
    checkboxValue.value = []
    uni.setStorageSync('cityCache', cityLocation.value)
  }

  function onrightClick() {
    if (isManage.value === false && rightTextState.value === 0) {
      // 启用管理模式并设置全选
      isManage.value = true;
      rightTextState.value = 1;
      rightText.value = "全选";
      leftIcon.value = "close";
    } else if (isManage.value === true && rightTextState.value === 1) {
      // 处理全选
      cityLocation.value.forEach((e, index) => {
        if (index !== currentId.value) {
          checkboxValue.value.push(e.adcode);
          e.checked = true;
        }
      });
      rightText.value = "取消全选";
      rightTextState.value = 2;
    } else if (isManage.value === true && rightTextState.value === 2) {
      // 处理取消全选
      cityLocation.value.forEach((e, index) => {
        if (index !== currentId.value) {
          e.checked = false;
        }
      });
      checkboxValue.value = [];
      rightText.value = "全选";
      rightTextState.value = 1;
    }

    isDisabled.value = checkboxValue.value.length > 0 ? false : true
  }

  function onleftClick() {
    if (isManage.value) {
      isManage.value = false
      rightTextState.value = 0
      rightText.value = "管理"
      leftIcon.value = "arrow-leftward"
      checkboxValue.value = []
      cityLocation.value.forEach((e, index) => {
        if (index !== currentId.value) {
          e.checked = false
        }
      })
    } else {
      if (!uni.getStorageSync('cityCache') || uni.getStorageSync('cityCache').length < 1) {
        uni.reLaunch({
          url: '/pages/city/city-search'
        })
      } else {
        uni.reLaunch({
          url:'/pages/index/index'
        })
      }
    }
  }

  function oncity(item) {
    if (rightTextState.value === 0) {
      const cityList = {
        adcode: item.adcode
      }
      uni.redirectTo({
        url: `/pages/index/index?cityList=${JSON.stringify(cityList)}`
      })
    }
  }
</script>

<template>
  <up-navbar title="选择城市" :leftIcon="leftIcon" :rightText="rightText" placeholder @leftClick="onleftClick"
    @rightClick="onrightClick">
  </up-navbar>
  <view class="city-search">
    <view class="search-content" @click="toSearch">
      <up-icon name="search" color="#C8C9CC"></up-icon>搜索城市
    </view>
  </view>
  <view class="city-list">
    <checkbox-group @change="checkboxChange">
      <label class="city-content" :class="$getWeatherBackground(item.realTime.icon)" v-for="item,index in cityLocation"
        :key="index" @click="oncity(item)">
        <view class="city-bg"
          :style="'background:url('+$getWeatherHomeImage(item.realTime.icon) +') no-repeat;background-size: contain;'">
        </view>
        <view class="content-left">
          <view class="content-text">{{item.location_name?item.location_name:item.city}} {{item.adm2_name?item.adm2_name:item.province}}
            <image src="@/static/icon/positioning.png" mode="heightFix" v-if="index === currentId"></image>
          </view>
          <view class="content-label">
            <view class="">{{item.AirQuality}}</view>
            <view class="">
              {{item.today?item.today.tempMax:weatherAll.max}}°/{{item.today?item.today.tempMin:weatherAll.min}}°
            </view>
          </view>
        </view>
        <view class="content-right">{{item.realTime.temp}}°</view>
        <checkbox :value="item.adcode" activeBackgroundColor="#2684FF" activeBorderColor="#2684FF" iconColor="#fff"
          :checked="item.checked" v-if="isManage && index !== currentId" />
      </label>
    </checkbox-group>
  </view>
  <up-transition :show="isManage" mode="fade">
    <view class="city-btn">
      <up-button icon="trash" :disabled="isDisabled" text="删除" @click.stop="delCity"></up-button>
    </view>
  </up-transition>
</template>

<style lang="scss" scoped>
  page {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .city-search {
    width: 100%;
    height: 104rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    z-index: 2;
    top: 0;
    box-sizing: border-box;
    padding: 0 32rpx;

    .search-content {
      width: 100%;
      height: 72rpx;
      border-radius: 38rpx;
      background: rgba(235, 236, 237, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(200, 201, 204, 1);

    }
  }

  .city-list {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    box-sizing: border-box;
    padding: 0 32rpx;

    ::v-deep .uni-checkbox-input {
      border-radius: 50%;
      margin-left: 28rpx;
    }

    .sunny {
      background: linear-gradient(225deg, #305ED1 0%, #8DADFC 100%);
    }

    //雨天
    .rainstorm {
      background: linear-gradient(134.07deg, #B5B5B5 0%, #808287 100%);
    }

    //多云
    .cloudy {
      background: linear-gradient(134.07deg, #919CB8 0%, #4E6396 100%);
    }

    //阴天
    .clear {
      background: linear-gradient(134.07deg, #919CB8 0%, #4E6396 100%);
    }

    //雾天
    .fog {
      background: linear-gradient(225deg, #305ED1 0%, #8DADFC 100%);
    }

    //雪天
    .sleet {
      background: linear-gradient(134.07deg, #B5B5B5 0%, #808287 100%);
    }

    //雾霾
    .smog {
      background: linear-gradient(133.41deg, #8F8F8F 0%, #656A75 63.36%, #272D38 100%);
    }

    //沙尘
    .sand-dust {
      background: linear-gradient(133.41deg, #DEB7A0 0%, #6B4A37 63.92%, #423529 100%);
    }

    .city-content {
      width: 100%;
      height: 164rpx;
      border-radius: 24rpx;
      // background: linear-gradient(134.07deg, #919CB8 0%, #4E6396 100%);
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 40rpx 30rpx 40rpx 32rpx;
      display: flex;
      align-items: center;
      position: relative;

      .city-bg {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url() no-repeat;
        mix-blend-mode: screen;
        background-size: cover;
      }

      .content-left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .content-text {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);

          image {
            width: 36rpx;
            height: 36rpx;
            margin-left: 8rpx;
          }
        }

        .content-label {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          margin-top: 8rpx;
          display: flex;

          :first-child {
            margin-right: 32rpx;
          }
        }
      }

      .content-right {
        font-size: 60rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

      }
    }
  }

  .city-btn {
    width: 100%;
    height: 88rpx;
    background: rgba(255, 255, 255, 1);
    border-top: 1rpx solid rgba(235, 235, 235, 1);
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>